<template>
  <div class="flip-clock">
    <div class="flip-unit-container">
      <div class="flip-card">
        <div class="flip-card-top" :class="{ 'flip': isHoursFlipping }">
          <div class="flip-card-inner">
            <div class="flip-card-front">{{ formatNumber(hours) }}</div>
            <div class="flip-card-back">{{ formatNumber(nextHours) }}</div>
          </div>
        </div>
        <div class="flip-card-bottom">
          <div class="digit">{{ formatNumber(hours) }}</div>
        </div>
      </div>
    </div>
    <div class="flip-unit-container">
      <div class="flip-card">
        <div class="flip-card-top" :class="{ 'flip': isMinutesFlipping }">
          <div class="flip-card-inner">
            <div class="flip-card-front">{{ formatNumber(minutes) }}</div>
            <div class="flip-card-back">{{ formatNumber(nextMinutes) }}</div>
          </div>
        </div>
        <div class="flip-card-bottom">
          <div class="digit">{{ formatNumber(minutes) }}</div>
        </div>
      </div>
    </div>
    <div class="flip-unit-container">
      <div class="flip-card">
        <div class="flip-card-top" :class="{ 'flip': isSecondsFlipping }">
          <div class="flip-card-inner">
            <div class="flip-card-front">{{ formatNumber(seconds) }}</div>
            <div class="flip-card-back">{{ formatNumber(nextSeconds) }}</div>
          </div>
        </div>
        <div class="flip-card-bottom">
          <div class="digit">{{ formatNumber(seconds) }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const hours = ref(0)
const minutes = ref(0)
const seconds = ref(0)
const nextHours = ref(0)
const nextMinutes = ref(0)
const nextSeconds = ref(0)
const isHoursFlipping = ref(false)
const isMinutesFlipping = ref(false)
const isSecondsFlipping = ref(false)

let timer = null

const updateTime = () => {
  const now = new Date()
  const newHours = now.getHours()
  const newMinutes = now.getMinutes()
  const newSeconds = now.getSeconds()

  if (newHours !== hours.value) {
    nextHours.value = newHours
    isHoursFlipping.value = true
    setTimeout(() => {
      hours.value = newHours
      isHoursFlipping.value = false
    }, 600)
  }

  if (newMinutes !== minutes.value) {
    nextMinutes.value = newMinutes
    isMinutesFlipping.value = true
    setTimeout(() => {
      minutes.value = newMinutes
      isMinutesFlipping.value = false
    }, 600)
  }

  if (newSeconds !== seconds.value) {
    nextSeconds.value = newSeconds
    isSecondsFlipping.value = true
    setTimeout(() => {
      seconds.value = newSeconds
      isSecondsFlipping.value = false
    }, 600)
  }
}

const formatNumber = (num) => {
  return num.toString().padStart(2, '0')
}

onMounted(() => {
  updateTime()
  timer = setInterval(updateTime, 1000)
})

onUnmounted(() => {
  if (timer) {
    clearInterval(timer)
  }
})
</script>

<style scoped>
.flip-clock {
  display: flex;
  gap: 10px;
  font-family: 'Arial', sans-serif;
  perspective: 1000px;
}

.flip-unit-container {
  position: relative;
  width: 60px;
  height: 80px;
  perspective: 1000px;
}

.flip-card {
  position: relative;
  width: 100%;
  height: 100%;
  background: #333;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.flip-card-top {
  position: absolute;
  top: 0;
  width: 100%;
  height: 50%;
  transform-origin: bottom;
  transform-style: preserve-3d;
  transition: transform 0.6s;
}

.flip-card-top.flip {
  transform: rotateX(-180deg);
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 200%;
  transform-style: preserve-3d;
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 50%;
  backface-visibility: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(to bottom, #444 0%, #333 100%);
  font-size: 36px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.flip-card-front {
  top: 0;
  border-radius: 5px 5px 0 0;
}

.flip-card-back {
  top: 50%;
  transform: rotateX(180deg);
  border-radius: 0 0 5px 5px;
  background: linear-gradient(to bottom, #333 0%, #444 100%);
}

.flip-card-bottom {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(to bottom, #333 0%, #444 100%);
  border-top: 1px solid #444;
  border-radius: 0 0 5px 5px;
}

.digit {
  font-size: 36px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* 添加分隔符 */
.flip-unit-container::after {
  content: ':';
  position: absolute;
  right: -15px;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 24px;
}

.flip-unit-container:last-child::after {
  display: none;
}
</style> 